<template>
	<div class="main">
		<a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
			<a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'left', borderBottom: 'unset' }" @change="handleTabClick">
				<a-tab-pane key="tab1" tab="账号密码登录">
					<login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-account>
				</a-tab-pane>
			</a-tabs>

			<a-form-model-item>
				<a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox>
				<router-link :to="{ name: 'alteration' }" class="forge-password" style="float: right"> 忘记密码 </router-link>
				<router-link :to="{ name: 'register' }" class="forge-password" style="float: right; margin-right: 10px"> 注册账户 </router-link>
			</a-form-model-item>

			<a-form-item style="margin-top: 24px">
				<a-button
					size="large"
					type="primary"
					htmlType="submit"
					class="login-button"
					:loading="loginBtn"
					@click.stop.prevent="handleSubmit"
					:disabled="loginBtn"
					>确定
				</a-button>
			</a-form-item>
		</a-form-model>

		<two-step-captcha
			v-if="requiredTwoStepCaptcha"
			:visible="stepCaptchaVisible"
			@success="stepCaptchaSuccess"
			@cancel="stepCaptchaCancel"
		></two-step-captcha>
		<third-login ref="thirdLogin"></third-login>
	</div>
</template>

<script>
import Vue from "vue";
import { ACCESS_TOKEN, ENCRYPTED_STRING } from "@/store/mutation-types";
import ThirdLogin from "./third/ThirdLogin";
import TwoStepCaptcha from "@/components/tools/TwoStepCaptcha";
import { getEncryptedString } from "@/utils/encryption/aesEncrypt";
import { timeFix } from "@/utils/util";

import LoginAccount from "./LoginAccount";

export default {
	components: {
		TwoStepCaptcha,
		ThirdLogin,
		LoginAccount,
	},
	data() {
		return {
			customActiveKey: "tab1",
			rememberMe: true,
			loginBtn: false,
			requiredTwoStepCaptcha: false,
			stepCaptchaVisible: false,
			encryptedString: {
				key: "",
				iv: "",
			},
		};
	},
	created() {
		Vue.ls.remove(ACCESS_TOKEN);
		this.getRouterData();
		this.rememberMe = true;
	},
	methods: {
		handleTabClick(key) {
			this.customActiveKey = key;
		},
		handleRememberMeChange(e) {
			this.rememberMe = e.target.checked;
		},
		/**跳转到登录页面的参数-账号获取*/
		getRouterData() {
			this.$nextTick(() => {
				let temp = this.$route.params.username || this.$route.query.username || "";
				if (temp) {
					this.$refs.alogin.acceptUsername(temp);
				}
			});
		},

		//登录
		handleSubmit() {
			this.loginBtn = true;
			if (this.customActiveKey === "tab1") {
				// 使用账户密码登录
				this.$refs.alogin.handleLogin(this.rememberMe);
			} else {
				//手机号码登录
				this.$refs.plogin.handleLogin(this.rememberMe);
			}
		},
		// 校验失败
		validateFail() {
			this.loginBtn = false;
		},
		// 登录后台成功
		requestSuccess(loginResult) {
      console.log(loginResult)
      this.$router.push({ path: "/teacher" })
      this.$notification.success({
        message: "欢迎",
        description: `${timeFix()}，欢迎回来`,
      });
		},
		//登录后台失败
		requestFailed(err) {
			let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试";
			this.$notification["error"]({
				message: "登录失败",
				description: description,
				duration: 4,
			});
			//账户密码登录错误后更新验证码
			if (this.customActiveKey === "tab1" && description.indexOf("密码错误") > 0) {
				this.$refs.alogin.handleChangeCheckCode();
			}
			this.loginBtn = false;
		},

		stepCaptchaSuccess() {
			this.loginSuccess();
		},
		stepCaptchaCancel() {
			this.Logout().then(() => {
				this.loginBtn = false;
				this.stepCaptchaVisible = false;
			});
		},
		//获取密码加密规则
		getEncrypte() {
			var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
			if (encryptedString == null) {
				getEncryptedString().then((data) => {
					this.encryptedString = data;
				});
			} else {
				this.encryptedString = encryptedString;
			}
		},
	},
};
</script>
<style lang="less" scoped>
.user-layout-login {
	label {
		font-size: 14px;
	}
	.getCaptcha {
		display: block;
		width: 100%;
		height: 40px;
	}

	.forge-password {
		font-size: 14px;
	}

	button.login-button {
		padding: 0 15px;
		font-size: 16px;
		height: 40px;
		width: 100%;
	}

	.user-login-other {
		text-align: left;
		margin-top: 24px;
		line-height: 22px;

		.item-icon {
			font-size: 24px;
			color: rgba(0, 0, 0, 0.2);
			margin-left: 16px;
			vertical-align: middle;
			cursor: pointer;
			transition: color 0.3s;

			&:hover {
				//   color: #1890ff;
				color: var(--color-theme);
			}
		}

		.register {
			float: right;
		}
	}
}
</style>
<style>
.valid-error .ant-select-selection__placeholder {
	color: #f5222d;
}
</style>
